import React from 'react'
import uuid from 'uuid'
import Form from '../../../share/Form'
import *as StringUtils from '../../../public/js/stringUtils'
import * as FormUtil from '../../../public/js/formUtil'
import * as AlertUtil from '../../../public/js/alertUtil'
import MenuEdit from '../menu/MenuEdit';

class UserEdit extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            formId : uuid.v4(),
            formData : {}
        }
    }

    componentDidMount() {
        const id = this.props.match.params['id']
        if(StringUtils.isNotEmpty(id)) {
            const url = domainName + '/users/' + id, data = {}
            FormUtil.getData(url,data,(response)=>{
                FormUtil.loadJsonDataToForm($('#'+ this.state.formId), response)
            })
        }
    }

    renderType() {
        if(StringUtils.isEmpty(this.props.match.params['id'])) {
            return (
                <input type="hidden" value="BACKEND" name="type"></input>
            )
        }
    }

    renderPassword() {
        if(StringUtils.isEmpty(this.props.match.params['id'])) {
            return (
                <div className="form-group row">
                    <label className="col-sm-2 text-right control-label col-form-label">密码<span className="text-danger">*</span></label>
                    <div className="col-sm-10">
                        <input type="password" name="password" className="form-control" placeholder="密码" required maxLength="50"/>
                    </div>
                </div>
            )
        }
    }

    save() {
        let url = domainName + '/users', data = $('#' + this.state.formId).serializeObject(), id = this.props.match.params['id'],
        submitMethod = 'POST'
        if(StringUtils.isNotEmpty(id)) {
            submitMethod = 'PUT'
        } 
        FormUtil.submit(url, data, (response)=>{
            AlertUtil.alert('提示',"保存成功!",()=>{
                this.props.history.goBack()
            })
        },(error) => {
            AlertUtil.alert('提示',"保存失败,请联系管理员!")
        }, submitMethod)
        
    }

    cancel() {
        this.props.history.goBack()
    }

    render() {
        return (
            <div>
                <Form formId={this.state.formId} saveHandle={this.save.bind(this)} cancelHandle={this.cancel.bind(this)}>
                    {this.renderType()}
                    <div className="form-group row">
                        <input type="hidden" name="id" />
                        <label className="col-sm-2 text-right control-label col-form-label">用户名<span className="text-danger">*</span></label>
                        <div className="col-sm-10">
                            <input type="text" name="username" className="form-control" placeholder="用户名" required maxLength="50"/>
                        </div>
                    </div>

                    {this.renderPassword()}

                    <div className="form-group row">
                        <label className="col-sm-2 text-right control-label col-form-label">昵称</label>
                        <div className="col-sm-10">
                            <input type="text" name="nickname" className="form-control" placeholder="昵称" maxLength="50"/>
                        </div>
                    </div>

                    <div className="form-group row">
                        <label className="col-sm-2 text-right control-label col-form-label">电话</label>
                        <div className="col-sm-10">
                            <input type="text" name="phone" className="form-control" placeholder="电话" maxLength="11"/>
                        </div>
                    </div>

                    <div className="form-group row">
                        <label className="col-sm-2 text-right control-label col-form-label">性别</label>
                        <div className="col-sm-10">
                            <select className="form-control" name="sex">
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                    </div>

                    <div className="form-group row">
                        <label className="col-sm-2 text-right control-label col-form-label">状态</label>
                        <div className="col-sm-10">
                            <select className="form-control" name="enabled">
                                <option value="true">正常</option>
                                <option value="false">禁用</option>
                            </select>
                        </div>
                    </div>

                </Form>            
            </div>
        )
    }
}


export default UserEdit